<template>
	<om-page :title="pageTitle">
		<view class="desc-chart">
			<uni-search-bar
			bgColorCls="bg-steelblue" 
			cancelColor="text-white"
			 :focus="true" 
			 placeholder="请输入关键字" 
			 @confirm="confirm"></uni-search-bar>
		</view>
		<view class="nodata" v-show="dataList.length == 0 && dataStatus">{{ '暂无数据！' }}</view>
		<view class="page__bd" style="margin-top: 51px;">
			<uni-list>
				<view v-for="(item, index) in dataList" :key="index">
					<uni-list-item
						:title="'付款申请条目号：'+item.onlyCode"
						:avatar="index + 1"
						:avatarBgColor="calcBgColor(item)"
						@click="getoLink(item)"
						 v-show="busCode == 'FIN0402'"
					>
					 <view slot="note">
						<view>经办人：<text class="">{{item.userName}}</text></view>
						<view>付款类别：<text class="">{{item.payCategoryName}}</text></view>
						<view>申请付款金额：<text class="">{{item.payNum}}</text></view>
						<view>已付款金额：<text class="">{{item.paidSum}}</text></view>
						<view>未付款金额：<text class="">{{item.unPaySum}}</text></view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">费用报销信息：</view>
							<view class='radius light bg-blue zbbtn' @click.stop="openPopup(item,0)" style="text-align: center;">查看</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">付款信息：</view>
							<view class='radius light bg-blue zbbtn' @click.stop="openPopup(item,1)" style="text-align: center;">查看</view>
						</view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">表单编码：{{item.code}}</view>
							<view v-show="item.code" class='radius light bg-blue zbbtn' @click.stop="getoLinks(item)" style="text-align: center;">明细</view>
						</view>
					 </view>
					</uni-list-item>
					<uni-list-item
						:title="'报销日期：'+item.reimbursementDateStr"
						:avatar="index + 1"
						:avatarBgColor="calcBgColor(item)"
						@click="getoLink(item)"
						 v-show="busCode != 'FIN0402'"
					>
					 <view slot="note">
						<view>费用类型：<text class="">{{item.expenseTypeName}}</text></view>
						<view>费用类别：<text class="">{{item.expenseCategoryName}}</text></view>
						<view>申请报销金额：<text class="">{{item.applyPayNum}}</text></view>
						<view>核准报销金额：<text class="">{{item.sumCosts || item.selfPayNum}}</text></view>
						<view>已支付金额：<text class="">{{item.paidAmount}}</text></view>
						<view style="height: 32px; line-height: 32px;">
							<view class="desw">表单编码：{{item.code}}</view>
							<view v-show="item.code" class='radius light bg-blue zbbtn' @click.stop="getoLinks(item)" style="text-align: center;">明细</view>
						</view>
					 </view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
		<view class="mask" v-show="maskShow">
			<view class="bg"></view>
			<view class="container">
				<view class="cont">
					<view class="tit">{{ table.tableTit }}</view>
					<view class="show">
						<ot-table
							textAlign="left" 
							titleTextAlign="center" 
							:tableData="table.tableData" 
							:columns="table.tableColumns"
						>
						</ot-table>
					</view>
					<view class="margin flex justify-end" @click="cancel">
						<a class="cancel-btn">关闭</a>
					</view>
				</view>
			</view>
		</view>
	</om-page>
</template>

<script>
	import { ignoreHtml } from '@/static/js/common.js';
	export default {
		data() {
			return {
				dataStatus: false,
				pageTotal: 1,
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				pageTitle:"付款申请查询",
				dataList: [],
				keyword: '',
				columnList: [],
				busCode: '',
				tableMark: '',
				dataUrl: '',
				tableTit:['费用报销信息','付款信息'],
				tableColumns: [[
					{
						title: '报销人',
						key: 'userName',
						width: 150,
					},
					{
						title: '报销岗位名称',
						key: 'posName',
						width: 150,
					},
					{
						title: '报销机构名称',
						key: 'instName',
						width: 150,
					},
					{
						title: '付款经办人',
						key: 'dataUserName',
						width: 150,
					},
					{
						title: '付款经办岗位名称',
						key: 'dataPosName',
						width: 200,
					},
					{
						title: '付款经办机构名称',
						key: 'dataInstName',
						width: 200,
					},
					{
						title: '说明',
						key: 'dataRemark',
						width: 150,
					},
					{
						title: '票据金额',
						key: 'planPayNum',
						width: 150,
					},
					{
						title: '已付款金额',
						key: 'paidNum',
						width: 150,
					},
					{
						title: '申请报销金额',
						key: 'applyPayNum',
						width: 150,
					},
					{
						title: '核准报销金额',
						key: 'selfPayNum',
						width: 150,
					},
					{
						title: '发票号',
						key: 'invoiceNumber',
						width: 150,
					},
					{
						title: '收款方名称',
						key: 'payeeName',
						width: 150,
					},
					{
						title: '费用承担机构',
						key: 'partakeInstName',
						width: 150,
					},
					{
						title: '制表时间',
						key: 'ztimeStr',
						width: 150,
					},
					{
						title: '审批人',
						key: 'zauserName',
						width: 150,
					},
					{
						title: '审批时间',
						key: 'zatimeStr',
						width: 150,
					},
					{
						title: '表单名称',
						key: 'busName',
						width: 150,
					}
				],[
					{
						title: '付款流水号',
						key: 'paySerialNumber',
						width: 150,
					},
					{
						title: '付款申请人',
						key: 'applyUserName',
						width: 150,
					},
					{
						title: '申请岗位名称',
						key: 'applyPosName',
						width: 150,
					},
					{
						title: '申请机构名称',
						key: 'applyInstName',
						width: 150,
					},
					{
						title: '申请付款金额',
						key: 'applyPayMoney',
						width: 150,
					},
					{
						title: '本次付款金额',
						key: 'payMoney',
						width: 150,
					},
					{
						title: '付款日期',
						key: 'payDateStr',
						width: 150,
					},
					{
						title: '付款方式',
						key: 'payTypeName',
						width: 150,
					},
					{
						title: '出纳员',
						key: 'zuserName',
						width: 150,
					},
					{
						title: '制表时间',
						key: 'ztimeStr',
						width: 150,
					},
					{
						title: '审批人',
						key: 'zauserName',
						width: 150,
					},
					{
						title: '审批时间',
						key: 'zatimeStr',
						width: 150,
					},
					{
						title: '表单名称',
						key: 'busName',
						width: 150,
					}
				]],
				table: {
					tableTit: [],
					tableData: [],
					tableColumns: []
				},
				maskShow: false,
			};
		},
		provide() {
			return {
				searchKey: this
			}
		},
		methods: {
			confirm(e){
				let _that = this
				if (e.value) {
				  if (!_that.keyword || (_that.keyword && _that.keyword != e.value.trim())) {
					_that.keyword = e.value.trim()
					_that.searchList()
				  }
				} else {
				  _that.keyword = ''
				  _that.searchList()
				}
			},
			calcBgColor(item) {
				return this.ColorList[3].name
			},
			getoLinks(item){
				let fileCode = item.code
				let busCode = item.busCode
				this.om.getFormInfoByFileCode(fileCode, busCode)
			},
			getoLink(item){
				let _that = this;
				let title = item.payCategoryName || item.expenseTypeName

				let arr = [];
				for(let i=0; i<_that.columnList.length; i++){
					let obj = {};
					obj.name = _that.columnList[i].title
					if(typeof(item[_that.columnList[i].field]) == "string"){
						obj.value = ignoreHtml(item[_that.columnList[i].field])
					}else{
						obj.value = item[_that.columnList[i].field]
					}
					
					arr.push(obj)
				}
				_that.om.getPageInfo(arr, title, {});
			},
			searchList(){
				let _that = this;				
				_that.pageNum = 1
				_that.dataList = []
				_that.dataStatus = false
				_that.getDataList()
			},
			getDataList(){
				let _that = this;
				_that.om.request(_that.dataUrl,{
					page: _that.pageNum,
					rows: _that.pageSize,
					keywords: _that.keyword,
					likeFlag: true
				}).then(res=>{
					_that.dataList = _that.dataList.concat(res.rows)
					_that.dataStatus = true
					_that.pageTotal = res.totalPage
				})
			},
			getColumnList(){
				let _that = this;
				_that.om.request("ttableColumn/getGridModel",{
					tableMark: _that.tableMark
				}).then(res=>{
					if(res.succeed){
						_that.columnList = res.value.frozenColumns[0] ? res.value.frozenColumns[0].concat(res.value.columns[0]) : res.value.columns[0];
					}else{
						_that.om.toast(res.msg)
					}
				})
			},
			openPopup(item,index){
				let _that = this;
				_that.table.tableTit = _that.tableTit[index]
				_that.table.tableColumns = _that.tableColumns[index]
				if(index==0){
					_that.om.request("expensesFormShow/findExpensesDataList",{
						payApplicationFormDataShowId: item.id
					}).then(res=>{
						_that.table.tableData = res
						_that.maskShow = true
					})
				}else{
					_that.om.request("payList/findPayDataList",{
						payApplicationFormDataShowId: item.id
					}).then(res=>{
						_that.table.tableData = res
						_that.maskShow = true
					})
				}
			},
			cancel(){
				this.table.tableTit = []
				this.table.tableColumns = []
				this.table.tableData = []
				this.maskShow = false
			},
		},
		onLoad(data) {
			let _that = this;
			_that.busCode = data.busCode
			
			if(_that.busCode == 'FIN0402'){
				_that.tableMark = 'KEY_235'
				_that.pageTitle = '付款申请查询'
				_that.dataUrl = 'payApplicationFormShow/getFormList'
			}else if(_that.busCode == 'FIN1215'){
				_that.tableMark = 'KEY_594'
				_that.pageTitle = '差旅费报销查询'
				_that.dataUrl = 'travelExpensesShow/getFormList'
			}else{
				_that.tableMark = 'KEY_593'
				_that.pageTitle = '费用报销查询'
				_that.dataUrl = 'expensesReimbursementShow/getFormList'
			}
			
			uni.setNavigationBarTitle({
				title: _that.pageTitle
			});
			
			_that.getColumnList()
			_that.getDataList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if(_that.pageTotal>_that.pageNum){
				_that.pageNum++
				_that.getDataList()
			}
		}
	};
</script>

<style>
	.zbbtn{
		float: right;
		width: 64px; 
		height: 28px;
		line-height: 28px;
		font-size: 12px;
		display: inline-block;
		margin: 0 5px;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-tip{
		font-size: 16px;
		color:#b0b0b0 ;
	}
	.table-data{
		/* overflow: hidden; */
		/* width: 270px; */
		/* position: relative; */
		/* display: block; */
		width: 270px;
		max-height: 160px;
		overflow: auto;
	}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
	.desc-chart{
		position: fixed;
		top: 0;
		/* line-height: 50px;
		padding: 0 15px; */
		font-size: 14px;
		border-bottom: #EEEEEE 1px solid;
		/* display: flex; */
		z-index: 99;
		width: 100%;
		background: #FFF;
	}
	.nodata{
		width: calc(100% - 30px);
		margin: 72px 15px 0;
		height: 26px;
		line-height: 26px;
		background: none;
		text-align: center;
	}
	.mask{
		position: fixed;
		z-index: 99;
	}
	.mask .bg{
		opacity: 1;
	    position: fixed;
	    bottom: 0px;
	    top: 0px;
	    left: 0px;
	    right: 0px;
	    background-color: rgba(0, 0, 0, 0.4);
	    transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
	    transform-origin: 50% 50% 0px;
	}
	.mask .container{
		transform: scale(1);
		opacity: 1;
		position: fixed;
		display: flex;
		flex-direction: column;
		bottom: 0px;
		left: 0px;
		right: 0px;
		top: 0px;
		justify-content: center;
		align-items: center;
		transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
		transform-origin: 50% 50% 0px;
	}
	.mask .container .cont{
		width: 300px;
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		box-sizing: border-box;
	}
	.mask .container .cont .tit{
		font-size: 16px;
		color: #b0b0b0;
		margin: 15px;
	}
	.mask .container .cont .show{
		
	}
	.desw{
		float: left;
	}
</style>